import { useRequest } from "ahooks";
import { Button, Col, Row, Statistic, Spin } from "antd";
import React from "react";
import { getStatisticDataApi } from "@/api/data";
const StatisticItem = (props) => {
  const { title, type } = props;
  const { data, loading, run } = useRequest(() => getStatisticDataApi(type), {
    pollingInterval: 6000,
  });
  return (
    <Col span={12}>
      <Spin spinning={loading}>
        <Statistic title={title} value={data} />
      </Spin>
      <Button
        disabled={loading}
        style={{
          marginTop: 16,
        }}
        type="primary"
        onClick={run}
      >
        刷新
      </Button>
    </Col>
  );
};
const AppMainStatics = () => {
  return (
    <Row gutter={16}>
      <StatisticItem title="商品总数量" type="product" />
      <StatisticItem title="用户总数量" type="user" />
    </Row>
  );
};
export default AppMainStatics;
